<template>
  <div class="product-edit-basic">
    <el-form inline :model="$props" ref="form" :rules="rules">
      <el-row>
        <el-form-item label="商品名称:" prop="name">
          <el-input
            :value="name"
            @input="$emit('update:name', $event)"
            clearable
          />
        </el-form-item>
        <el-form-item label="商品类别:" prop="category">
          <el-cascader
            :options="treeCategory"
            :filterable="true"
            :value="category"
            clearable
            :props="{
              expandTrigger: 'hover',
              label: 'name',
              value: 'id',
              emitPath: false,
            }"
            @input="$emit('update:category', $event)"
          />
        </el-form-item>

        <el-form-item label="是否上架:" prop="is_published">
          <el-switch
            :value="is_published"
            @input="$emit('update:is_published', $event)"
          />
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="商品原价:" prop="price">
          <el-input-number
            :value="price"
            @input="$emit('update:price', $event)"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品售价:" prop="sale_price">
          <el-input-number
            :value="sale_price"
            @input="$emit('update:sale_price', $event)"
          ></el-input-number>
        </el-form-item>
      </el-row>

      <el-form-item label="商品库存:" prop="stock">
        <el-input-number
          :value="stock"
          @input="$emit('update:stock', $event)"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="商品副标题:" prop="subtitle">
        <el-input
          :value="subtitle"
          @input="$emit('update:subtitle', $event)"
        ></el-input>
      </el-form-item>
      <el-row>
        <el-form-item label="商品展示图片链接：">
          <el-input
            :value="display_image"
            clearable=""
            @input="$emit('update:display_image', $event)"
          ></el-input>
          <el-image
            :src="display_image"
            style="width: 200px; background: #eee; margin-top: 10px"
          ></el-image>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="商品简述:" prop="short_desc">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            maxlength="50"
            show-word-limit
            :style="{ width: '500px' }"
            :value="short_desc"
            @input="$emit('update:short_desc', $event)"
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "ProductEditBasic",
  props: [
    "name",
    "category",
    "is_published",
    "price",
    "sale_price",
    "stock",
    "subtitle",
    "display_image",
    "short_desc",
  ],
  computed: {
    ...mapGetters(["treeCategory"]),
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, trigger: "blur", message: "商品名称为必填项" },
        ],
        category: [
          { required: true, trigger: "blur", message: "商品类别为必填项" },
        ],
      },
    };
  },
  methods: {
    validate() {
      return this.$refs.form.validate();
    },
  },
};
</script>

<style scoped></style>
